
<template>
    <div>
        这是首页

        <ElAlert v-model:visible="alertVisible" title="success alert" type="warning" />
        <ElButton @click="showSuccess">弹出</ElButton>

        <ElButton @click="showConfirm">点击打开消息弹出框</ElButton>

        <ElButton @click="dialogFormVisible = true">打开一个表单对话框</ElButton>

        <ElDialog v-model="dialogFormVisible" title="创建用户">
            <ElForm ref="ruleFormRef" :model="form" :rules="rules" label-width="80px">
                <ElFormItem label="姓名" prop="name">
                    <ElInput v-model="form.name" />
                </ElFormItem>
                <ElFormItem label="年龄" prop="age">
                    <ElInput v-model="form.age" />
                </ElFormItem>
                <ElFormItem label="性别" prop="sex">
                    <ElSelect v-model="form.sex" placeholder="请选择性别">
                        <ElOption label="男" value="男" />
                        <ElOption label="女" value="女" />
                    </ElSelect>
                </ElFormItem>
            </ElForm>
            <template #footer>
                <span class="dialog-footer">
                    <ElButton @click="dialogFormVisible = false">取消</ElButton>
                    <ElButton type="primary" @click="submitForm">确认</ElButton>
                </span>
            </template>
        </ElDialog>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElAlert, ElButton, ElDialog, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElMessage, ElMessageBox } from 'element-plus';

const dialogFormVisible = ref(false);
const form = reactive({
    name: '',
    age: '',
    sex: '',
});
const rules = {}; // 根据需要定义表单验证规则
const ruleFormRef = ref(null);

// 定义 alertVisible
const alertVisible = ref(false);

const showSuccess = () => {
    ElMessage.success('登录成功');
};

const showConfirm = () => {
    ElMessageBox.confirm('你确认要删除这个吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功',
            });
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除取消',
            });
        });
};

const submitForm = () => {
    // 确认表单验证逻辑
    ruleFormRef.value.validate(valid => {
        if (valid) {
            // 提交表单逻辑
            dialogFormVisible.value = false;
            ElMessage.success('提交成功');
        } else {
            return false;
        }
    });
};
</script>